<template>
    <section>
        <el-row :gutter="20">
            <!--工具条-->
            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                <el-form :inline="true" :model="filters">
                    <el-form-item>
                        <el-input v-model="filters.keyword" placeholder="任务号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="filters.obtainStatus" placeholder="状态">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="已有提交" value="1"></el-option>
                            <el-option label="申请延期" value="3"></el-option>
                            <el-option label="申请取消" value="6"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" v-on:click="getUsers">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <!--统计-->
            <!--el-col :span="4"><div class="grid-content bg-purple">总数:{{out_data.totalCount}}</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">进行中:{{out_data.typeOne}}</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">已有提交:{{out_data.typeTwo}}</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">取消申请:{{out_data.typeThree}}</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">延期申请:{{out_data.typeFour}}</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">议价申请:{{out_data.typeFive}}</div></el-col-->
        </el-row>

        <!--列表-->
        <el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;margin-top: 20px;">
            <el-table-column type="index" width="60">
            </el-table-column>
            <el-table-column prop="taskId" label="ID" width="80" >
            </el-table-column>
            <el-table-column prop="keyword" label="任务号" width="150" >
            </el-table-column>
            <el-table-column prop="name" label="任务名" width="150" >
            </el-table-column>
            <el-table-column prop="type" label="任务类型" width="100" >
            </el-table-column>
            <el-table-column prop="taskNick" label="发布人昵称" width="150" >
            </el-table-column>
            <el-table-column prop="obtainStatus" label="审核状态" width="100" :formatter="formatStatus" >
            </el-table-column>
            <el-table-column prop="updateTime" label="审核时间" :formatter="formatDate" width="180" >
            </el-table-column> 
            <el-table-column label="操作" min-width="150">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
                    <el-button type="primary" size="small" @click="goAudit(scope.row.id, '1', scope.$index, scope.row)" v-if="scope.row.schoolStatus == 0">审核通过</el-button>
                    <el-button type="danger" size="small" @click="goAudit(scope.row.id, '2', scope.$index, scope.row)" v-if="scope.row.schoolStatus == 0">审核不通过</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
            </el-pagination>
        </el-col>

    </section>
</template>

<script>
    import util from '../../common/js/util'
    //import NProgress from 'nprogress'
    import { getTaskObtainList } from '../../api/api';
    import moment from 'moment'

    export default {
        data() {
            return {
                filters: {
                    keyword: '',
                    obtainStatus: '',
                },
                users: [],
                out_data: {
                    totalCount:"",
                    typeOne:"",
                    typeTwo:"",
                    typeThree:"",
                    typeFour:"",
                    typeFive:"",
                },
                total: 0,
                page: 1,
                size: 10,
                listLoading: false,
                sels: [],//列表选中列

            }
        },
        methods: {
            formatStatus: function (row, column) {
                if(row.obtainStatus == 0){
                    return '未提交';
                }else if(row.obtainStatus == 1){
                    return '已提交';
                }else if(row.obtainStatus == 2){
                    return '后台提交给委托方';
                }else if(row.obtainStatus == 3){
                    return '申请延期';
                }else if(row.obtainStatus == 4){
                    return '延期开发中';
                }else if(row.obtainStatus == 5){
                    return '被退回修改中';
                }else if(row.obtainStatus == 6){
                    return '申请取消';
                }else if(row.obtainStatus == 7){
                    return '已取消';
                }else if(row.obtainStatus == 8){
                    return '审核通过';
                }else if(row.obtainStatus == 9){
                    return '已打款';
                }else{
                    return '';
                }
            },
            formatDate: function(row, column){
                return moment(row.updateTime).format("YYYY-MM-DD HH:mm:ss")
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getUsers();
            },
            //获取用户列表
            getUsers() {
                let para = {
                    page: this.page,
                    size: this.size,
                    keyword: this.filters.keyword,
                    obtainStatus: this.filters.obtainStatus,
                    status:1
                };
                this.listLoading = true;
                //NProgress.start();
                getTaskObtainList(para).then((res) => {
                    //console.log("-------------")
                    //console.log(res.data.data)
                    this.total = parseInt(res.data.out_data.totalCount);

                    this.users = res.data.data;
          

                    this.listLoading = false;
                    //NProgress.done();
                });
            },

            //显示查看界面
            handleEdit: function (index, row) {
                this.$router.push('taskCompletedetail?id='+row.obtainId)
            },
            selsChange: function (sels) {
                this.sels = sels;
            }
        },
        mounted() {
            this.getUsers();
        }
    }

</script>

<style scoped>
    .el-col {
        padding: 10px 10px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
        line-height: 36px;
        text-align: center;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>